<template>
	<div class="main-1">
		<div class="title">{{ label }}</div>
		<div class="input"><input :maxlength="maxlength" :type="inputType" :placeholder="placeholder" :value="inputValue" @blur="handlerBlue" /></div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		label: {
			type: String,
			validator: value => {
				return value.length <= 4;
			}
		},
		inputType: {
			type: String,
			default: () => {
				return 'text';
			}
		},
		placeholder: {
			type: String
		},
		inputValue: {},
		maxlength: {
			type: Number,
			default: () => {
				return -1;
			}
		}
	},
	methods: {
		handlerBlue(e) {
			this.$emit('blur', e.detail.value);
		}
	}
};
</script>

<style scoped lang="scss">
.main-1 {
	width: 100%;
	padding-bottom: 30upx;
	display: flex;
	align-items: center;
	height: 80upx;
	.title {
		width: 120upx;
		font-size: 30upx;
		line-height: 1;
		text-align: justify;
		text-align-last: justify;
		white-space: nowrap;
		color: #303133;
		padding-right: 20upx;
	}
	.input {
		width: calc(100% - 130upx);
		box-sizing: border-box;
		border: 1px solid #ebebeb;
		padding: 0 20upx;
		font-size: 0;
		height: 100%;
		border-radius: 5upx;
		input {
			width: 100%;
			height: 100%;
			font-size: 30upx;
			line-height: 1;
			color: #000;
		}
	}
}
</style>
